<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex布局-圣杯布局</title>
  <style>
    * {
      margin: 0;
    }
    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    header,footer {
      flex: 1;
      background-color: #ddd;
      text-align: center;
      align-content: center;
    }
    .main {
      display: flex;
      flex-direction: row;
      flex:12;
    }
    .content{
      flex: 1;
      background-color: lightgreen;
    }
    .left,.right {
      flex: 0 0 12em;
      background-color: orange;
    }
    .left {
      order: -1;
    }
    ul {
      list-style: none;
    }
    .stud {
      margin-top: 10px;
    }
    /*.studManager {*/
    /*  display: none;*/
    /*}*/
  </style>
  <script>
    function showStud() {
      document.querySelector(".studManager").style.display = "block"
    }
  </script>
</head>
<body>
  <header>Flex布局-圣杯布局( 页头 )</header>
  <div class="main">
    <div class="content">
      <iframe  name="con" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <div class="right">右边栏</div>
    <div class="left">
      <ul>
        <li class="stud" onclick="showStud()">
          学生管理
          <ul class="studManager">
            <li>
              <a href="a.html" target="con">学生列表</a></li>
            <li>编辑学生</li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
  <footer>页脚</footer>
</body>
</html>
